<template>
  <div>
    <el-form :model="List" label-width="80px">
      <el-form-item label="商品名称">
        <el-input disabled placeholder="请输入商品名称" v-model="List.name"></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input disabled placeholder="请输入商品描述" v-model="List.subtitle"></el-input>
      </el-form-item>
      <el-form-item label="当前状态">
        <el-input disabled placeholder="请输入商品描述" v-if="List.status==1" value="在售"></el-input>
        <el-input disabled placeholder="请输入商品描述" v-if="List.status==2" value="下架"></el-input>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-select v-model="List.region" placeholder="请选择一级品类">
          <el-option
            v-for="(item,index) in options"
            :key="index"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>`
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input disabled class="inp" placeholder="价格" v-model="List.price">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <!-- stock -->
        <el-input disabled class="inp" placeholder="库存" v-model="List.stock">
          <template slot="append">件</template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <img class="image" v-if="List.mainImage" :src="List.imageHost+List.mainImage" alt  />
        <img
          class="image"
          v-else
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584113118119&di=d3fbabb647a1691ced3e6ae869b293a3&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D30305038%2C711507037%26fm%3D214%26gp%3D0.jpg"
          alt
          srcset
        />
      </el-form-item>
      <el-form-item label="商品详情" class="p">
        <p class="ca" v-html="List.detail"></p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { GoodList } from "../../request/http";
import { Goods } from "../../request/http";
export default {
  data() {
    return {
      ruleForm: "",
      input: "",
      List: {},
      value: "",
      categoryId: 0,
      options: []
    };
  },
  methods: {
    goodList() {
      GoodList(this.$route.query.id).then(res => {
        console.log(res);
        this.List = res.data.data;
      });
    },
    goods(){
      Goods(this.categoryId).then((res)=>{
        console.log(res)
        this.options=res.data.data
      })
    }
  },
  mounted() {
    this.goodList();
    this.goods()
  }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.title {
  @include FontOnly(35px);
  margin-bottom: 30px;
}
.el-form-item {
  width: 50%;
  margin-top: 30px;
}
.image{
  width: 80px;
  height: 80px;
}
.p{
   width: 30%;
   height: 50px;
   img{
     width: 100%;
     height: 100%;
   }
}
</style>